<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{name}}</h3>
			<h3>{{counter}}</h3>
			<button @click="counter++">++</button>
			<button @click="des">销毁</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					name: '张三',
					counter: 0
				},
				methods: {
					des() {
                       this.$destroy();//销毁
					}
				},
				//vue对象初始化之后
				beforeCreate() {
					console.log("beforeCreate,不能访问到data中的数据以及methods中的方法");
					console.log(this.name);
				},
				//vue对象创建完成后
				created() {
					console.log("created,能访问到data中的数据以及methods中的方法");
					console.log(this.name);
				},
				//挂载之前
				beforeMount() {
					console.log("beforeMount");
					// debugger;
				},
				//挂载之后
				mounted() {
					console.log("mounted");
					// debugger;
				},
				//更新之前
				beforeUpdate() {
					console.log("beforeUpdate")
				},
				//更新后
				updated() {
					console.log("updated")
				},
				//销毁之前
				beforeDestroy() {
					console.log("beforeDestroy")
				},
				//销毁后
				destroyed() {
					console.log("destroyed")
				}
			})
		</script>
	</body>
</html>
